<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OU管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<!--表格 -->
<table class="layui-hide" id="ID-treeTable-demo" lay-filter="TD-manage" ></table>

<!--表格列“操作”里的按钮 -->
<script type="text/html" id="barManage">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-danger" lay-event="del" id="del">删除</a>
    <a class="layui-btn layui-btn-warm" lay-event="add" id="add">添加子部门</a>
    <a class="layui-btn layui-btn-warm" lay-event="add-user" id="add-user">添加用户</a>
  </div>
</script>

<div id="delOU" style="display: none"></div>
<div id="addOU" class="addOU" style="display: none">
  <div class="layui-inline">
	<label class="layui-form-label">部门名称</label>
	<div class="layui-input-inline">
	  <input type="text" id="ou_name1" name="username"  lay-verify="required" class="layui-input">
	</div>
  </div>
</div>
<div id="addUSER" class="addUSER" style="display: none">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
          <input type="text" id="username" name="username"  lay-verify="required" class="layui-input">
        </div>
      </div>

      <div class="layui-inline">
        <label class="layui-form-label">登录密码</label>
        <div class="layui-input-inline">
          <input type="password" id="password" name="password"  lay-verify="required" class="layui-input">
        </div>
      </div>

      <div class="layui-inline">
        <label class="layui-form-label">确认密码</label>
        <div class="layui-input-inline">
          <input type="password" id="password1" lay-verify="required|confirmPass" class="layui-input">
        </div>
      </div>
    </div>
</div>
</body>
<script>
    // 初始化执行函数
    $(function (){initTable();});
    // 初始化表格
    function initTable(){
        layui.use(function (){
            let treeTable = layui.treeTable;    // 树形表格属性
            // 执行生成
            var inst = treeTable.render({   //可以不用变量inst
                elem: '#ID-treeTable-demo',     // 引用名称 table标签里引用
                id: 'tableId',  // 表格id索引
                url: '/data_ou', // 此处为静态模拟数据，实际使用时需换成真实接口
                method: 'post',     // 访问方法
                {#tree: { }, // 不知道什么作用，注释掉不影响程序执行#}
                {#toolbar: '#TPL-treeTable-demo',  // 上方工具栏的引用名称，暂未使用，先注释掉#}
                cols: [[    // 定义表格的列
                    {type: 'numbers', title: '序号',fixed: 'left'},   // 自带的序号
                    {field: 'name', title: '部门名称', width: 380},     // 使用field的值从data里取值，tittle是表格的表头名
                    {field: 'name_dn', title: 'DN', width: 380},
                    {title: '操作', width: 320,toolbar: '#barManage'} // toolbar在id="barManage"的script标签里引用
                ]],
                page: false, // 是否分页
                text: '获取失败', // 加载数据出错时的提示
                done: function (res, current, count){
                    $('thead tr').css({'background-color': '#8E236B', 'color': 'white' })
                    treeTable.expandAll('tableId',true);    // 需要等待表格渲染结束后再展开
                }
            });
            treeTable.on('tool(TD-manage)', function(obj){
                var oneLineData = obj.data;
                if(obj.event==='del'){
                    layui.use('layer', function (){
                        //实例化一个弹出层对象
                        let layer = layui.layer;
                        //展示弹出层
                        layer.open({
                            type: 1,    // 弹出层类型
                            title: '警告：删除后无法恢复！请点击“确认”删除',
                            {#area: ['500px', '400px'],#}   // 弹出层窗口尺寸
                            btn: ['确定','取消'],
                            shade: [0.5,'#00000'],
                            shadeClose:    true,
                            content: $('#delOU'),
                            btn1: function (layero,index){  // 按钮1也就是“确定”的功能函数
                                $.ajax({
                                    url:'/delete_ou',   // 接口地址
                                    type:'post',    // 请求方法
                                    data:{keywords:oneLineData.name_dn},    //请求的数据，用字典格式
                                    {#dataType:'json',#}
                                    success:function (res){ // 点击后执行的函数
                                        {#console.log(res);#}
                                        if(res.code === 1){   // 根据返回码判断执行的操作，实际其实不需要判断返回码，直接显示消息即可
                                            alert(res.msg);
                                            layer.closeAll();
                                            treeTable.reloadData('tableId') // 重载表格数据
                                        }
                                        else if(res.code === 2){alert(res.msg)}
                                    },
                                })
                            },
                        })
                    })
                }
                else if(obj.event==='add'){
                    // 添加子部门的方法函数
                    layui.use('layer', function (){
                        //实例化一个弹出层对象
                        let layer = layui.layer;
                        //展示弹出层
                        layer.open({
                            type: 1,    // 弹出层类型
                            title: '添加子部门',
                            {#area: ['500px', '400px'],#}
                            btn: ['确定','取消'],
                            shade: [0.5,'#00000'],
                            shadeClose:    true,
                            content: $('#addOU'),
                            btn1: function (layero,index){
                                $.ajax({
                                    url:'/add_ou',
                                    type:'post',
                                    data:{
                                        ou_name:$('#ou_name1').val(),
                                        keywords:oneLineData.name_dn
                                    },
                                    success:function (res){
                                        if(res.code === 1){alert(res.msg);
                                            layer.closeAll();
                                            treeTable.reloadData('tableId') // 重载表格数据
                                        }
                                        else if(res.code === 2){alert(res.msg)}
                                    }
                                })
                            },
                            end:function (layero,index){
                                document.getElementById("addOU").setAttribute('style','display: none');
                            },
                        })
                    })
                }
                else if(obj.event==='add-user'){
                    // 添加子部门的方法函数
                    layui.use('layer', function (){
                        //实例化一个弹出层对象
                        let layer = layui.layer;
                        //展示弹出层
                        layer.open({
                            type: 1,    // 弹出层类型
                            title: '添加用户',
                            area: ['400px', '253px'],
                            btn: ['确定','取消'],
                            shade: [0.5,'#00000'],
                            shadeClose:    true,
                            content: $('#addUSER'),
                            btn1: function (layero,index){
                                if ($('#password').val()===$('#password1').val()){
                                    $.ajax({
                                        url:'/add_user',
                                        type:'post',
                                        data:{
                                            username:$('#username').val(),
                                            password:$('#password').val(),
                                            dn:oneLineData.name_dn
                                        },
                                        {#dataType:'json',#}
                                        success:function (res){
                                            if(res.code === 1){
                                                alert(res.msg);
                                                layer.closeAll();
                                                treeTable.reloadData('tableId') // 重载表格数据
                                            }
                                            else if(res.code === 2){alert(res.msg)}
                                        }
                                    })
                                }
                                else if($('#password').val()!=$('#password1').val()){
                                    alert('密码不一致')
                                }
                            },
                            end:function (layero,index){
                                document.getElementById("addUSER").setAttribute('style','display: none');
                            },
                        })
                    })
                }
            });
        })
    }
</script>
</html>